<template>
	<div class="totalStyle contractinfo_box">
		<div class="tablestyle">
			<div class="titleStyle">
				<p class="leftTitle font_w">能耗管理</p>
				<div>
					<el-button type="primary" :loading="exportLoading" @click="handleExport">导出数据</el-button>
					<el-button type="primary" @click="handleBuild">新建</el-button>
				</div>
			</div>
			<div class="bottomBox">
				<div class="searchsize">
					<el-row :gutter="24" style="width: 100%;" class="searchBox flex">
						<el-col :span="7.5">
							<el-date-picker v-model="queryParams.planTime" type="daterange" start-placeholder="开始日期"
								end-placeholder="结束日期" value-format="YYYY-MM-DD" :clearable="false" />
						</el-col>
						<el-col :span="3">
							<Select placeholder="请选择拖轮" :selectData="selects.tugList" v-model:value="queryParams.tugId"
								v-model:label="queryParams.tugNo" />
						</el-col>
						<el-col :span="4">
							<el-button type="info" plain @click="reset">重置</el-button>
							<el-button type="primary" plain class="searchbutton" @click="search">查询</el-button>
						</el-col>
					</el-row>
				</div>
				<div class="chartstyle">
					<el-table :data="tableData" :header-cell-style="{ background: '#F2F5FA' }" border
						style="width: 100%;">
						<el-table-column type="index" label="序号" width="80" />
						<el-table-column prop="beginDte" label="能耗记录起日期" width="150" align="center" />
						<el-table-column prop="endDte" label="能耗记录止日期" width="150" align="center" />
						<el-table-column prop="tugNo" label="拖轮" width="150" align="center" />
						<el-table-column prop="oneHourConsume" label="单耗" width="150" align="center" />
						<el-table-column prop="oriCost" label="油耗" width="100" align="center" />
						<el-table-column prop="powerCost" label="用电量" width="100" align="center" />
						<el-table-column prop="waterCost" label="用水量" width="150" align="center" />
						<el-table-column prop="leftMainWorkHours" label="左主机作业时长" width="150" align="center" />
						<el-table-column prop="leftMainBegNum" label="左主机起小时数" width="150" align="center" />
						<el-table-column prop="leftMainEndNum" label="左主机止小时数" width="150" align="center" />
						<el-table-column prop="rightMainWorkHours" label="右主机作业时长" width="150" align="center" />
						<el-table-column prop="rightMainBegNum" label="右主机起小时数" width="150" align="center" />
						<el-table-column prop="rightMainEndNum" label="右主机止小时数" width="150" align="center" />
						<el-table-column prop="oneAuxWorkHours" label="1号副机作业时长" width="150" align="center" />
						<el-table-column prop="oneAuxBegNum" label="1号副机起小时数" width="150" align="center" />
						<el-table-column prop="oneAuxEndNum" label="1号副机止小时数" width="150" align="center" />
						<el-table-column prop="twoAuxWorkHours" label="2号副机作业时长" width="150" align="center" />
						<el-table-column prop="twoAuxBegNum" label="2号副机起小时数" width="150" align="center" />
						<el-table-column prop="twoAuxEndNum" label="2号副机止小时数" width="150" align="center" />
						<el-table-column prop="oriBegVolume" label="初始存油量" width="150" align="center" />
						<el-table-column prop="oriEndVolume" label="结束存油量" width="150" align="center" />
						<el-table-column prop="beforeDraft" label="前吃水" width="150" align="center" />
						<el-table-column prop="ofterDraft" label="后吃水" width="150" align="center" />
						<el-table-column prop="remark" label="备注" width="150" align="center" />
						<el-table-column label="操作列" width="120" fixed="right" align="center">
							<template #default="scope">
								<span class="buttonFun cursor" @click="handleEdit(scope.row)">编辑</span>
								<el-popconfirm width="520" confirm-button-text="确定" cancel-button-text="取消"
									@confirm="handleDelete(scope.row)" title="你确定要删除这条数据吗?">
									<template #reference>
										<span class="buttonFun cursor">删除</span>
									</template>
								</el-popconfirm>
							</template>
						</el-table-column>
						<template #empty>
							<el-empty v-loading="tableLoading"></el-empty>
						</template>
					</el-table>
					<div class="demo-pagination-block">
						<el-pagination :current-page="queryParams.startPage" :page-size="queryParams.pageSize"
							:page-sizes="[5, 10, 15, 20]" :background="background"
							layout="total, sizes, prev, pager, next, jumper" :total="total"
							@size-change="handleSizeChange" @current-change="handleCurrentChange" />
					</div>
				</div>
			</div>
		</div>
		
		<!-- 详情 -->
		<Detail ref="detailRef" @callback="queryTableData(queryParams)"></Detail>
	</div>
</template>

<script setup name="consume">
	import api from '@/api/consume/index'
import tugApi from '@/api/basicData/tug/index'
import Select from '@/components/Select/index.vue'
import Detail from './component/detail.vue'
import { exportFile } from "@/utils/fileUtils";
import { ElMessage, ElMessageBox,ElNotification } from "element-plus";
	import {
		ref,
		onMounted
	} from "vue";
const detailRef = ref(null) // 明细组件ref
	const tableLoading = ref(false)
	const total = ref(0)
	const tableData = ref()
	const selects = ref({
		tugList: []
	})
	const queryParams = ref({
		dates:[],
		startDate:'',
		endDate:'',
		tugId:'',
		tugNo:'',
		startPage: 1,
		pageSize: 10
	})

	//新增
	const handleBuild = () => {
		detailRef.value.show({
		  mode: 'add'
		})
	}
	//重置
	const reset = () => {
		queryParams.value = {
			dates:[],
			startDate:'',
			endDate:'',
			tugId:'',
			tugNo:'',
			startPage: 1,
			pageSize: 10
		}
		queryTableData(queryParams.value)
	}
	//编辑
	const handleEdit = (row) => {
		detailRef.value.show({
		  mode: 'edit',
		  row:row
		})
	}
	//删除
	const handleDelete = (row) => {
		api.remove({
			ids: row.id
		  })
		  .then(res => {
			if (res.code === 200) {
			  ElMessage.success('删除成功')
			  queryTableData(queryParams.value)
			} else {
			  ElMessage.error(res.msg)
			}
		  })
	}
	//切换一页显示多少条数据
	const handleSizeChange = (val) => {
		queryParams.value.pageSize = val;
		queryTableData(queryParams.value);
	};
	// 点击跳转到第几页
	const handleCurrentChange = (val) => {
		queryParams.value.startPage = val;
		queryTableData(queryParams.value);
	};
	//查询
	const search = () => {
		queryParams.value.startPage = 1
		queryParams.value.pageSize = 10
		queryTableData(queryParams.value)
	}
	//查询
	const queryTableData = (e) => {
		tableLoading.value = true
		if(e.dates&&e.dates.length > 0){
		  e.startDate = e.dates[0]
		  e.endDate = e.dates[1]
		}
		queryParams.value = e
		api.getList(queryParams.value).then(res => {
			tableLoading.value = false
			tableData.value = res.data?.records || []
			total.value = res.data?.total || 0
		})
	}
	onMounted(() => {
		getTugList()
		queryTableData(queryParams.value)
	})
	const getTugList = () => {
		var list = []
		tugApi.getList({startPage: 1,pageSize: 100}).then(res=>{
			if(res.data.records.length > 0){
				res.data.records.forEach(item=>{
					list.push({label:item.tugNo,value:item.id})
				})
			}
		}).then(_=>{
			selects.value.tugList = list
		})
	}
	// 导出数据
	const exportLoading = ref(false)
	const handleExport = () => {
		exportLoading.value = true;
		var params = JSON.parse(JSON.stringify(queryParams.value))
		params.pageSize = 1000
		api.exportData(params).then(res=>{
			exportFile(res.data,'能耗管理导出','xlsx')
		}).then(_=>{
			setTimeout(function(){
				exportLoading.value = false;
			},300)
		})
	}
</script>
<style lang='less' scoped>
	.tablestyle {
		position: relative;

		.inputBox {
			:deep(.el-input) {
				width: 200px;
			}
		}

		:deep(.el-table__header thead tr) {
			background-color: rgba(64, 158, 255, 0.1);
		}

		:deep(.el-col-3) {
			max-width: none;
		}
	}

	.contractinfo_box {
		:deep(.el-table--fit) {
			height: 100%;
		}

		:deep(.el-table__body-wrapper) {
			overflow-y: auto;
		}

		.tablestyle {
			position: relative;

			:deep(.el-table__header thead tr) {
				background-color: rgba(64, 158, 255, 0.1);
			}

			:deep(.el-col-3) {
				max-width: none;
			}
		}

		:deep(.customer-no-border-table .el-table--border, .el-table--group) {
			border: none;
		}

		.demo-pagination-block {
			margin-top: 16px;
			position: absolute;
			bottom: 32px;
			right: 32px;
		}

		.buttonFun {
			color: #2E83FC;
			font-size: 14px;
			margin-right: 8px;
		}

		.sircle {
			width: 6px;
			height: 6px;
			border-radius: 50%;

			display: inline-block;
			margin-bottom: 3px;
		}

		.blue {
			background-color: #2E83FC;
		}

		.green {
			background-color: #54B831;
		}

		.origin {
			background-color: #FFB929;
		}

		.origin_deep {
			background-color: #FF9458;
		}

		.red {
			background-color: #F46B5A
		}

		.bottomBox {
			padding: 16px;
			height: calc(100% - 48px);
		}
	}
</style>